<template>
  <div class="layoutHome">
    <div class="header">
      <!-- 头部按钮（右侧有这里可能没有） -->
      <div class="btnGroups">
        <div class="group">
          <div class="btn">5</div>
          <div class="btn">5</div>
          <div class="btn">5</div>
          <div class="btn">5</div>
          <div class="btn">5</div>
          <div class="btn">5</div>
        </div>
        <div class="groupOther">
          <div class="btn">1</div>
          <div class="btn">1</div>
          <div class="btn">1</div>
          <div class="btn">1</div>
          <div class="btn">1</div>
        </div>
      </div>

      <!-- 音量 -->
      <div class="vol">
        <el-slider :disabled="false"> </el-slider>
      </div>
    </div>
    <main>
      <!-- 音响设备列表 -->
      <equipList class="mainEquipt"> </equipList>

      <!-- 音乐列表 -->
      <musicList class="mainMucis"></musicList>

      <!-- 右侧按钮（头部有这里可能没有） -->
      <div class="btns" v-if="!btnTopShow"></div>
    </main>
  </div>
</template>

<script>
import { getisBtnTopApi } from '@/api/index';
import equipList from '@/views/layout/home/components/equipList';
import musicList from '@/views/layout/home/components/musicList';
export default {
  name: 'text1',
  props: {
    isCollapse: {
      type: Boolean,
    }
  },
  components: {
    equipList,
    musicList
  },
  data() {
    return {
      layoutConfig: {},
      btnTopShow: true
    };
  },
  mounted() {
    this.getLayoutConfig();
  },

  methods: {
    /**
     * @use 获取布局配置
     */
    async getLayoutConfig() {
      const res = await getisBtnTopApi();
      this.layoutConfig = res.data;
      const btn = document.querySelector('.group');
      const otherBtn = document.querySelector('.groupOther');
      const equip = document.querySelector('.mainEquipt');
      const music = document.querySelector('.mainMucis');
      const btnLayout = this.layoutConfig.btnLayout;
      const otherBtnLayout = this.layoutConfig.otherBtnLayout;
      const mainEquipt = this.layoutConfig.mainEquipt;
      const mainMusic = this.layoutConfig.mainMusic;

      if (btnLayout.direction === 0) {
        btn.setAttribute('class', 'horizon');
        btn.style.width = `${btnLayout.width}px`;
        btn.style.height = `${btnLayout.height}px`;
        btn.style.top = `${btnLayout.top}px`;
        btn.style.left = `${btnLayout.left}px`;
      } else {
        btn.setAttribute('class', 'column');
        btn.style.width = `${btnLayout.width}px`;
        btn.style.height = `${btnLayout.height}px`;
        btn.style.top = `${btnLayout.top}px`;
        btn.style.right = `${btnLayout.right}px`;
      }

      if (otherBtnLayout.direction === 0) {
        otherBtn.setAttribute('class', 'horizonOther');
        otherBtn.style.width = `${otherBtnLayout.width}px`;
        otherBtn.style.height = `${otherBtnLayout.height}px`;
        otherBtn.style.top = `${otherBtnLayout.top}px`;
        otherBtn.style.left = `${otherBtnLayout.left}px`;
      } else {
        otherBtn.setAttribute('class', 'columnOther');
        otherBtn.style.width = `${otherBtnLayout.width}px`;
        otherBtn.style.height = `${otherBtnLayout.height}px`;
        otherBtn.style.top = `${otherBtnLayout.top}px`;
        otherBtn.style.right = `${otherBtnLayout.right}px`;
      }

      if (
        this.layoutConfig.btnLayout.direction === 0 &&
        this.layoutConfig.otherBtnLayout.direction === 0
      ) {
        // 说明两个都是横向排列
        this.btnTopShow = true;
        equip.setAttribute('class', 'systemNoRightBtn');
        music.setAttribute('class', 'musicNoRightBtn');
      } else {
        // 两个都是纵向排列
        this.btnTopShow = false;
      }

      equip.style.width = `${mainEquipt.width}px`;
      equip.style.height = `${mainEquipt.height}px`;
      equip.style.top = `${mainEquipt.top}px`;
      equip.style.left = `${mainEquipt.left}px`;

      music.style.width = `${mainMusic.width}px`;
      music.style.height = `${mainMusic.height}px`;
      music.style.top = `${mainMusic.top}px`;
      music.style.left = `${mainMusic.left}px`;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
